/**
 * Created by Jimmy on 2018/12/2.
 */
<template>
  <div class="output-distribution">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/panel/project/distribution' }">产值分配</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="serh dis-serh">
      <el-input placeholder="请输入项目名称搜索" v-model="searchProjectInput" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchProjectList"></el-button>
      </el-input>
    </div>
    <el-form v-model="form" ref="form" class="fr" :inline="true">
      <el-form-item label="">
        <el-checkbox v-model="form.tobeDis" @change="tobeDis">产值待分配</el-checkbox>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      :stripe= 'true'
      class=""
      style="width:100%">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column prop="ProjectNumber" label="项目编号" align="center" width="130"></el-table-column>
      <el-table-column label="项目名称" align="center" class="link-txt">
        <template slot-scope="scope">
          <el-button type="text" @click="detailCheck(scope.row.ID)">{{scope.row.ProjectName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="ProjectTypeName" label="项目类型" align="center" width="100"></el-table-column>
      <el-table-column prop="PmName" label="项目负责人" align="center" width="100"></el-table-column>
      <el-table-column prop="DepartmentOutput" label="部门产值" align="center" width="100"></el-table-column>
      <el-table-column prop="RemainOutput" label="待分配产值" align="center" width="100"></el-table-column>
      <!--<el-table-column prop="EngineerCount" label="其他参与人数" align="center"></el-table-column>-->
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="distributePage(scope.row.ID)">分配详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        token:'',
        searchProjectInput:'',
        total: 0,
        currentPage: 1,
        form:{
          tobeDis:true,
        },
        tableData:[]
      };
    },
    created: function(){
      let user = JSON.parse(window.localStorage.getItem('access-user'))
      this.token = user.Token
      this.loadList(this.currentPage)
    },
    methods:{
      searchProjectList(){
        this.loadList(this.currentPage)
      },
      tobeDis(){
        this.loadList(this.currentPage)
      },
      loadList(page) {
        var args = {
          token:this.token,
          page:page,
          finish:!this.form.tobeDis,
          project:this.searchProjectInput,
        }
        this.$http.post(this.domain + '/allocation/index',
          args
        ).then((response) => {
          if (response.data.Success) {
            this.tableData = response.data.Projects
            this.total = response.data.Total
            this.$message.success(response.data.Msg)
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      handleCurrentChange (val) {
        this.currentPage = val;
        this.loadList(this.currentPage)
      },
      detailCheck(ID){
        let routeData = this.$router.resolve({
          path: '/panel/project/detail',
          query: {
            id: ID
          }
        })
        window.open(routeData.href, '_blank')
      },
      distributePage(ID){
        this.$router.push({
          path: '/panel/project/distributiondetail',
          query: {
            id: ID
          }
        })
      }
    }
  }
</script>
<style>
  .output-distribution>h4{
    height: 36px;
    line-height: 36px;
  }
  .resize-date-input .el-form-item__content{
    display: inline-block;
  }
  .output-distribution .el-checkbox{
    line-height: 40px;
  }
  .dis-serh{
    margin-right: 0;
  }
</style>
